
import {Table} from "antd"
export default function AntdTable() {
    //创建 数据源
    const data = [
        {
          key: '1',
          name: '胡彦斌',
          age: 32,
          address: '西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '吴彦祖',
          age: 42,
          address: '西湖区湖底公园1号',
        },
      ];

      //表头的配置项
      let columns = [
        {
            title:"姓名",  //表头的名称
            dataIndex:"name",  //表格列的数据，  值为数据源中的数据名称
        },
        {
            title:"年龄",  //表头的名称
            dataIndex:"age",  //表格列的数据，  值为数据源中的数据名称
        },
        {
            title:"住址",  //表头的名称
            dataIndex:"address",  //表格列的数据，  值为数据源中的数据名称
        },
      ] 
      

    return (
        <div style={{padding:100}}>
            <Table 
                dataSource={data} 
                columns={columns} 
                bordered
                loading={false}
                pagination={{
                    total:10,  //数据总数
                    pageSize:5,  //每页展示数量
                    current:1,  //当前页码
                    showSizeChanger:true,  //是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
                    pageSizeOptions:[5,10,15,20],  //指定每页可以显示多少条
                    showQuickJumper:true,   //是否可以快速跳转至某页
                    showTotal(total: number){
                        return <span>总数：{total}条</span>
                    }

                }}
            />
        </div>
    )
}
